<template>
  <a :href="detailUrl">
    <div class="book-card">
      <div class="thumb" @click.stop="preview">
        <img
          :src="book.image" 
          class="img"
          mode="aspectFit"
        />
      </div>
      <div class="detail">
        <div class="row text-primary">
          <div class="left">
            {{ book.title }}
          </div>
          <div class="right rate">
            <span>{{ book.rate }}</span>
            <!-- <Rate :value="book.rate/2" theme="#EA5149" length="5"></Rate> -->
          </div>
          <Rate :value="book.rate"></Rate>
        </div>
        <div class="row">
          <div class="left">
            {{ book.author }}
          </div>
          <div class="right text-primary">
            浏览量:{{ book.count }}
          </div>
        </div>
        <div class="row">
          <div class="left">
          {{ book.publisher }}
          </div>
          <div class="right">
            {{ book.user_info.nickName }}
          </div>
        </div>
      </div>
    </div>
  </a>
</template>

<script>
import Rate from './rate'
// import Rate from 'vue-tiny-rate'

export default {
  props: {
    book: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  computed: {
    detailUrl () {
      return `/pages/bookDetail/main?isbn=${this.book.isbn}`
    }
  },
  components: {
    // rate
    Rate
  },
  methods: {
    preview () {
      wx.previewImage({
        current: this.book.image,
        urls: [this.book.image]
      })
    }
  }
}
</script>

<style>
.card {
  padding: 10px;
}

</style>
<style lang='scss' scoped>
.book-card{
  padding: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  .thumb{
    flex: 0 0 90px;
    height: 90px;
    .img{
      width: 100%;
      height: 100%;
    }
  }
  .detail{
    flex: 1;
    display: flex;
    flex-direction: column;
    .row{
      display: flex;
      justify-content: space-between;
      .left{
        flex: 1;
      }
      .right{
        flex-basis: 65px;
        text-align: center;
        display: flex;
        &.rate {
          flex-basis: 0;
        }
      }
    }
  }
  
}
</style>